import React, { useState, useEffect } from 'react';
import { Card, List, Avatar, Tag, Button, Divider, Spin } from 'antd';
import { SvgIcon } from '@/components/icon';
import orchestrationService from '@/api/services/orchestrationService';
import { App } from 'antd';
import { AppPublishHistory } from '@/common/types/app/app';
import dayjs from 'dayjs';
import { formatData } from '@/utils/time';
interface HistoryVersionsProps {
  onRestore: (version: string) => void;
  onSelectVersion: (version: string | null) => void;
}

const HistoryVersions: React.FC<HistoryVersionsProps> = ({ onRestore, onSelectVersion }) => {
  const [selectedVersion, setSelectedVersion] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [historyData, setHistoryData] = useState<AppPublishHistory[]>([]);
  const { message } = App.useApp();
  useEffect(() => {
    const fetchReviewHistory = async () => {
      try {
        setLoading(true);
        const appId = new URLSearchParams(window.location.search).get('appId');
        if (!appId) {
          // message.error('未获取到应用ID');
          return;
        }

        const response = await orchestrationService.getAppPublishHistory(appId);

        console.log(response);

        setHistoryData(response?.version_list?.filter((item: any) => item.is_publish));
      } catch (error) {
        message.error('获取历史版本失败');
      } finally {
        setLoading(false);
      }
    };

    fetchReviewHistory();
  }, []);

  const handleSelectVersion = (id: string) => {
    const newSelectedVersion = selectedVersion === id ? null : id;
    setSelectedVersion(newSelectedVersion);
    onSelectVersion(newSelectedVersion);
  };

  return (
    <Card
      title={
        <div className="flex items-center">
          <span className="text-[16px] font-medium">历史版本</span>
        </div>
      }
      className="h-full overflow-auto px-2 py-1"
      bodyStyle={{ height: 'calc(100% - 57px)', overflowY: 'auto' }}
    >
      {loading ? (
        <div className="flex items-center justify-center h-full">
          <Spin tip="加载中..." />
        </div>
      ) : (
        <List
          itemLayout="horizontal"
          dataSource={historyData}
          renderItem={(item) => (
            <List.Item
              className="px-6 py-4 cursor-pointer"
              key={item.id}
              onClick={() => handleSelectVersion(item.id)}
            >
              <div
                className={`flex items-center justify-center w-full p-3 rounded-lg ${selectedVersion === item.id ? 'bg-primary' : 'bg-gray'}`}
                style={{
                  transition: 'background-color 0.3s'
                }}
              >
                <div className="flex flex-col items-center">
                  <span
                    className="text-[14px] font-medium text-center"
                    style={{ color: '#FFFFFF' }}
                  >
                    {/* 发布于 {dayjs(item.time + 'Z').format('YYYY-MM-DD HH:mm:ss')} */}
                    发布于 {formatData(item.time)}
                  </span>
                </div>
              </div>
            </List.Item>
          )}
        />
      )}
    </Card>
  );
};

export default HistoryVersions; 